<template>
    <div class="index">

      <follow-view v-bind:follow="follow" v-on:follow-status="changeFollow"></follow-view>
      <header-component></header-component>
      <div class="container">
        <div class="indexcont">
          <div class="time"><img src="../assets/images/header-top2.png"></div>
          <div class="sysmsg">
        <span class="item">
          <div>参与选手</div>
          <div>{{amountCandidates}}人</div>
        </span>
            <span class="item">
              <div>累计投票</div>
              <div>{{amountVotes}}次</div>
            </span>
            <span class="item">
              <div>访问量</div>
              <div>{{flows}}次</div>
            </span>
          </div>
          <search-bar v-on:search-result="searchResult"></search-bar>
          <div class="indexcont-title"><img src="../assets/images/cszp.png"></div>
          <div class="indexcont-cont">
            <div class="product-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
              <router-link class="product-item" v-for="item in items" :to="{ name: 'detail', params: { id: item.id }}">
                <div class="image"><img :src="item.imgUrl"></div>
                <div class="title">{{item.title}}</div>
                <div class="msg"><span class="id">{{item.number}}号</span><span class="author">{{item.realName}}</span><span class="num">{{item.votes}}票</span></div>
                <div class="vote" v-on:click="addVotesFun(item.id)">投票</div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <footer-msg></footer-msg>
    </div>
</template>
<style scoped>
  .indexcont img{
    max-width:100%;
  }
  .indexcont .time{
    margin-top:0.1rem;
  }
</style>
<script>
import HeaderComponent from './Header.vue'
import SearchBar from './SearchBar.vue'
import FooterMsg from './FooterMsg.vue'
import FollowView from './FollowView.vue'
var count = 0;
export default {

  data () {
    return{
      items: "",
      busy: false,
      page:1,
      follow:false,
      amountCandidates:"",
      amountVotes:"",
      flows:""
    }
    },
    components:{
            HeaderComponent,SearchBar,FooterMsg,FollowView
        },
    methods: {
      loadMore: function() {
        this.page++;
        this.axios.get("/api/vote/1/home?page="+this.page).then((response) => {

          if(response.data.code===200){
                if(response.data.object.candidates.length<=0){

                }else{
                  this.items.push(response.data.object.candidates);
                  console.log(response.data);
                }
           }

        })
      },
      searchResult:function(data){
        if(data){
          this.items=data;
        }
      },
      addVotesFun:function(id){
            event.preventDefault();
            this.axios.post("/api/vote/1/candidate/"+id).then((response) => {
              if(response.data.code===200){
                alert(response.data.message);
                this.$router.go(0);
              }else{
                if(response.data.message==="投票必须先关注公众号"){
                  this.follow=true;
                  return false;
                }
                alert(response.data.message);
              }

            })
          },
          changeFollow:function(msg){
            this.follow=msg;
          }
    },
    mounted(){
      this.axios.get("/api/vote/1/home").then((response) => {
        this.items=response.data.object.candidates;
        this.amountVotes=response.data.object.amountVotes;
        this.amountCandidates=response.data.object.amountCandidates;
        this.flows=response.data.object.flows;
      })
    }
}
</script>
